<DOCTYPE! html>
<html>
<head>
    <meta charser="utf-8">
    <title>Day and nigth</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body, html {
        height: 100%;
    }

    body {
        font-family: sans-serif;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
    }

    h1 {
        padding: 1em 0;
    }

    p {
        margin: 1em 0;
    }

    .page {
        background: #fff;
        color: #092c3e;
        min-height: 100%;
    }

    #dark-mode-input {
        display: none;
    }

    #dark-mode-input:checked ~ .page {
        background: #092c3e;
        color: #fff;
    }

    .dark-mode-toggler {
        position: absolute;
        width: 40px;
        height: 20px;
        background: grey;
        border: 2px solid #fff;
        border-radius: 20px;
        top: 10px;
        right: 10px;
        transition: all 300ms ease-in-out;
    }

    .dark-mode-toggler {
        position: absolute;
        width: 40px;
        height: 20px;
        background: grey;
        border: 2px solid grey;
        border-radius: 20px;
        top: 10px;
        right: 10px;
        transition: all 300ms ease-in-out;
    }

    .dark-mode-toggler div {
        width: 12px;
        height: 12px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: all 300ms ease-in-out;
    }

    #dark-mode-input:checked ~ .dark-mode-toggler {
        background: #fff;
    }

    #dark-mode-input:checked ~ .dark-mode-toggler div {
        background: grey;
        left: 21px;
    }
</style>
</head>

<body>
    <input type="checkbox" id="dark-mode-input" />
    <label class="dark-mode-toggler" for="dark-mode-input">
        <div></div>
    </label>
    <div class="page">
        <section class="container">
            <header class="title">
                <h1 class="main-page-title">You Dont Need Javascript. </h1>
            </header>
    </div>
</body>
</html>